<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!--      xmlns:shiro="http://www.thymeleaf.org/thyleaf-extras-shiro"-->

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>layui在线调试</title>
    <link rel="stylesheet" href="/layui/plugins/layui/css/layui.css" media="all" />
    <script src="/layui/plugins/layui/layui.js"></script>
    <script src="/main/js/jquery.min.js"></script>
    <style>
        body{margin: 10px;}
        .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
    </style>
</head>
<body>

    <input id="userName" name="userName" type="hidden" th:value="${session.user}"/>
    <input id="url" name="url" type="hidden" th:value="${url}"/>

<div style="margin: 15px;">
    <fieldset class="layui-elem-field">
        <legend>人员管理 </legend>
        <p>&nbsp;</p>

        <table id="userList" class="layui-table" lay-filter="demo">
        </table>
    </fieldset>
</div>

<div id="pageDemo"></div>

<script type="text/html" id="barDemo">
    <div class="layui-btn-group">
        <!-- 这里的编辑包括两方面的管理 一个是人员角色的更改，另一个是人员的状态的改变（能否进行登录）-->
        <button class="layui-btn layui-btn-mini" lay-event="edit">编辑</button>
    </div>
</script>
<script th:inline=none>
    var url = '/user/userManage/1';
    var nurl = document.getElementById("url").value;
    var turl = null;
    if (nurl == ''||nurl == null||nurl==undefined){
        turl = url;
    }else turl = nurl;
    var count = null;
    var currPage = null;
    layui.use(['laypage','layer', 'table', 'element'], function(){

          layer = layui.layer;//弹层
          table = layui.table; //表格
          element = layui.element;//元素操作
          laypage = layui.laypage; //分页
//        table.init('filter', options); //转化静态表格
        table.render({
            id:'tid',
            elem:'#userList',
            width:1300,
            // page:'true',
            url:turl,
            cols: [[
                {field:'userId', title: '#', width:80, sort: true}
                ,{field:'userName', title:'账号名', width:200}
                ,{field:'email', title: 'Email地址', width:225}
                ,{field:'createTIme', title: '创建时间', width:200}
                ,{field:'status', title: '账号状态', width:236}
                ,{field:'roleName', title: '角色名称', width:138}
                ,{toolbar:'#barDemo', title: '操作', width:150}
            ]],
            // data: function (res) { //将原始数据解析成 table 组件所规定的数据
            //     return {
            //         "code": res.code, //解析接口状态
            //         "msg": res.msg, //解析提示文本
            //         "count": res.data.total, //解析数据长度
            //         "data": res.data.data //解析数据列表
            //     };
            // },
        });

        $.ajax({
            url:turl,
            dataType:"json",   //返回格式为json
            type:"Get" , //请求方式 get 或者post
            success:function (data) {
                page(data);
            }
        });
        function page(data) {
            count = data.count;
            currPage = data.pageNum;
            //分页 ajax 可以的到当前的count
            laypage.render({
                elem: 'pageDemo' //分页容器的id
                , limit:data.limit
                , count: count
                , curr: currPage
                , skin: '#1E9FFF' //自定义选中色值
                , skip: true //开启跳页
                , prev: '上一页 '
                , next: ' 下一页'
                // ,layout: ['prev', 'page', 'next', 'limit', 'count','refresh','skip']
                ,layout: ['prev', 'page', 'next','count','refresh','skip']
                , jump: function (obj, first) {
                    if (!first) {
                        var currentPage = obj.curr;//获取点击的页码
                        url = '/user/userManage/' + currentPage;
                        // window.location.href = url;
                        window.location.href = '/user/returnUserManage?url='+url;
                    }
                }

            });


            //监听工具条
            table.on('tool(demo)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data;//获得当前行数据
                id = data.userId,
                layEvent = obj.event; //获得 lay-event 对应的值
                 if (layEvent === 'edit') {
                     var cump = layer.open({
                         type: 2,
                         area: ['400px', '600px'],
                         content: '/user/admin/updateUserStatus?id='+id
                     });
                 }

            });
        }

    });

</script>

</body>
</html>